<!--flex布局-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="./css/style.css"/>
    <title>水果拼盘</title>
</head>

<body>
<div id="board">
    <!-- 水果位置 -->
    <div id="pond">
        <!-- 苹果 -->
        <div class="fruit apple">
            <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit apple">
            <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit apple">
            <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit apple">
            <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit apple">
            <div class="bg animated pulse infinite"></div>
        </div>
        <!-- 梨 -->
        <div class="fruit pear">
            <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit pear">
            <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit pear">
            <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit pear">
            <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit pear">
            <div class="bg animated pulse infinite"></div>
        </div>
        <!-- 香蕉 -->
        <div class="fruit banana">
            <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit banana">
            <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit banana">
            <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit banana">
            <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit banana">
            <div class="bg animated pulse infinite"></div>
        </div>
    </div>

    <!-- 背景位置 -->
    <div id="fruit-background" style="flex-flow: column wrap">
        <div class="lilypad apple">
            <div class="bg"></div>
        </div>
        <div class="lilypad apple">
            <div class="bg"></div>
        </div>
        <div class="lilypad apple">
            <div class="bg"></div>
        </div>
        <div class="lilypad apple">
            <div class="bg"></div>
        </div>
        <div class="lilypad apple">
            <div class="bg"></div>
        </div>
        <div class="lilypad pear">
            <div class="bg"></div>
        </div>
        <div class="lilypad pear">
            <div class="bg"></div>
        </div>
        <div class="lilypad pear">
            <div class="bg"></div>
        </div>
        <div class="lilypad pear">
            <div class="bg"></div>
        </div>
        <div class="lilypad pear">
            <div class="bg"></div>
        </div>
        <div class="lilypad banana">
            <div class="bg"></div>
        </div>
        <div class="lilypad banana">
            <div class="bg"></div>
        </div>
        <div class="lilypad banana">
            <div class="bg"></div>
        </div>
        <div class="lilypad banana">
            <div class="bg"></div>
        </div>
        <div class="lilypad banana">
            <div class="bg"></div>
        </div>
    </div>
</div>
</body>
</html>
